function SocketClient() {
  this.list_elem = document.getElementById('client_list');
  this.info_div = document.getElementById('info_div');
  var self = this;
}

SocketClient.prototype.connect = function() {
  var self = this;

  this.list_elem.innerHTML = '';
  this.info_div.innerHTML = 'status: connecting...';
  this.socket = new WebSocket("ws://" + document.location.host + "/chat");

  this.socket.onopen = function() {
    self.onopen.apply(self, arguments);
  };
  this.socket.onmessage = function() {
    self.onmessage.apply(self, arguments);
  };
  this.socket.onclose = function() {
    self.onclose.apply(self, arguments);
  };
};

SocketClient.prototype.deviceAdded = function(params) {
  var el = document.createElement('li');
  el.innerHTML = '<a href="devtools/devtools.html?host=' + document.location.host + '&page=' + params.page + '">' + params.device_name + '</a>' + ' <span class="device_details">(' + params.app_id + ', ' + params.device_model + ', ' + params.device_id + ')</span>';
  this.list_elem.appendChild(el);
  this.visibleElems[params.connection_id] = el;
};

SocketClient.prototype.deviceRemoved = function(params) {
  var li = this.visibleElems[params.connection_id];
  li.parentNode.removeChild(li);
};

SocketClient.prototype.onopen = function() {
  this.info_div.innerHTML = 'status: connected to gateway';
  this.list_elem.innerHTML = '';
  this.visibleElems = {};
  console.log('connection to gateway opened');
};

SocketClient.prototype.onmessage = function(message) {
  var el = document.createElement('li');
  el.innerHTML = message.data;
  window.document.getElementById('history').appendChild(el);
};

SocketClient.prototype.onclose = function() {
  var retryInterval = 1000.0;
  console.log('connection closed, retrying in ' + (retryInterval / 1000.0) + ' seconds');
  var self = this;
  window.setTimeout(function() {
    self.connect();
  }, retryInterval);
};


var addEvent = function(obj, type, fn) {
  if (obj.addEventListener)
    obj.addEventListener(type, fn, false);
  else if (obj.attachEvent) {
    obj["e" + type + fn] = fn;
    obj.attachEvent("on" + type, function() {
      obj["e" + type + fn]();
    });
  }
};

addEvent(window, "load", onloadMsg)

//window.addEventListener('load', function () {
function onloadMsg() {
  var form = window.document.getElementById('msg_form');
  var msg_field = window.document.getElementById('msg_field');

  var socketClient = new SocketClient();
  socketClient.connect()

  form.onsubmit = function() {
    msg = msg_field.value;
    msg_field.value = '';

    socketClient.socket.send(msg);

    var el = document.createElement('li');
    el.innerHTML = msg;
    window.document.getElementById('history').appendChild(el);

    return false;
  };
}
//);
